<template>
	<div class="publicpageview" id="publicpageview">
		<div class="publicformview">
			<el-form :model="addQuery" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-row>
					<el-col :span="9">
						<el-form-item label="合同编号：" prop="contractno">
							<div style="display: flex;">
								<el-input v-model="addQuery.contractno"></el-input>
								<el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">查询</el-button>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item>
							<div class="buttons">
								<el-button type="primary" @click="gotos" size="medium">返回</el-button>
								<el-button type="primary" size="medium" v-print="printObj">打印分户</el-button>
								<div id="loading" v-show="printLoading"></div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="合同编号：" prop="contractno">
							<el-input disabled v-model="addQuery.contractno"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="房屋地址：" prop="addr">
							<el-input disabled v-model="addQuery.addr"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="承租单位：" prop="renter">
							<el-input disabled v-model="addQuery.renter"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="承租单位身份证号：" prop="renteridno">
							<el-input disabled v-model="addQuery.renteridno"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="受让单位：" prop="ownerunit">
							<el-input v-model="addQuery.ownerunit"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="受让单位身份证号：" prop="owneridno">
							<el-input v-model="addQuery.owneridno"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<el-table v-loading="listLoading" :data="searchList" border fit highlight-current-row size="mini"
				style="margin-top: 20px;">
				<el-table-column align="center" label="房屋状况" type="index">
				</el-table-column>

				<el-table-column align="center" label="房屋结构">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.structure"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="地段等级">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.structurelevel"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="租金类别">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.rentkind"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="租金定额">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.realrent"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="间数">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.roomcount"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="建筑面积">
					<template slot-scope="scope">
						<el-input disabled v-model="scope.row.area"></el-input>
					</template>
				</el-table-column>
				<!-- <el-table-column align="center" label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="addFenhu">添加分户</el-button>
					</template>
				</el-table-column> -->
			</el-table>

			<el-form :model="addQuery" :disabled="dialogName=='区公司复核转让'||dialogName=='区公司审核转让'||dialogName=='详情'"
				style="margin-top: 30px;">
				<el-row :gutter="24">

					<el-col :span="8">
						<el-form-item label="转让原因：" prop="transferreason" label-width="120px">
							<el-input v-model="addQuery.transferreason"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="评估报告编号：" prop="evaluateno" label-width="120px">
							<el-input v-model="addQuery.evaluateno"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="评估单价(元/㎡)：" prop="evaluateprice" label-width="120px">
							<el-input v-model="addQuery.evaluateprice"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="出售价格(元)：" prop="sellprice" label-width="120px">
							<el-input v-model="addQuery.sellprice"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="实收转让费(元)：" prop="transferfee" label-width="120px">
							<el-input v-model="addQuery.transferfee"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="计算公式：" prop="transferfee1" label-width="120px">
							<el-input v-model="addQuery.transferfee1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="欠租情况：" prop="owe" label-width="120px">
							<div style="display: flex;align-items: center;">
								<el-switch v-model="addQuery.owe" active-value="是" inactive-value="否">
								</el-switch>
								<el-input class="xingxi" style="margin-left: 15px;" v-model="addQuery.owe1"
									placeholder="请说明详细情况"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="违章拆改：" prop="destroy" label-width="120px">
							<div style="display: flex;align-items: center;">
								<el-switch v-model="addQuery.destroy" active-value="是" inactive-value="否">
								</el-switch>
								<el-input class="xingxi" style="margin-left: 15px;" v-model="addQuery.destroy1"
									placeholder="请说明详细情况"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="租凭纠纷：" prop="disagree" label-width="120px">
							<div style="display: flex;align-items: center;">
								<el-switch v-model="addQuery.disagree" active-value="是" inactive-value="否">
								</el-switch>
								<el-input class="xingxi" style="margin-left: 15px;" type="" v-model="addQuery.disagree1"
									placeholder="请说明详细情况"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注：" prop="memo" label-width="120px">
							<el-input v-model="addQuery.memo"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="文件名称：" prop="floorcount" label-width="120px">
							<div v-if="dialogName == '转让登记'" style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">
								文件上传
							</div>
							<div v-else style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">查看文件</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div class="contentAll">
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="jinbanQuery" disabled ref="dataForm" class="demo-ruleForm"
						label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办人意见：" prop="fgzcheckview">
									<div style="display: flex;">
										<el-input v-model="jinbanQuery.fgzcheckview"></el-input>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办人：" prop="fgzcheck">
									<el-input v-model="jinbanQuery.fgzcheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办时间：" prop="fgzcheckdate">
									<el-date-picker v-model="jinbanQuery.fgzcheckdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form :model="fangguanQuery" :disabled="dialogName!='房管站审核'" ref="dataForm" class="demo-ruleForm"
						label-position="right" label-width="200px" style="width: 450px;">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="管理部（分中心）负责人意见：" prop="fgzmanagerview">
									<div style="display: flex;">
										<el-select v-model="fangguanQuery.fgzmanagerview">
											<el-option label="同意" value="同意" key="00"></el-option>
										</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="负责人：" prop="fgzmanager">
									<el-input v-model="fangguanQuery.fgzmanager"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="经办时间：" prop="fgzmanagerdate">
									<el-date-picker v-model="fangguanQuery.fgzmanagerdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<img class="imgs" :src="addQuery.imghousestation" alt="" />
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="fuheQuery" :disabled="dialogName!='区公司复核转让'" ref="dataForm"
						class="demo-ruleForm" label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="核查意见：" prop="qgsview">
									<div style="display: flex;">
										<el-select v-model="fuheQuery.qgsview">
											<el-option label="同意" value="同意" key="00"></el-option>
											<el-option label="不同意" value="不同意" key="40"></el-option>
										</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="核查人：" prop="qgscheck">
									<el-input v-model="fuheQuery.qgscheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="核查时间：" prop="qgsdate">
									<el-date-picker v-model="fuheQuery.qgsdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<img class="imgs" :src="addQuery.imgcompany" alt="" />
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="shenheQuery" :disabled="dialogName!='区公司审核转让'" ref="dataForm"
						class="demo-ruleForm" label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="抽查意见：" prop="zgsview">
									<div style="display: flex;">
										<el-select v-model="shenheQuery.zgsview">
											<el-option label="同意" value="同意" key="00"></el-option>
											<el-option label="不同意" value="不同意" key="40"></el-option>
										</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="抽查人：" prop="zgscheck">
									<el-input v-model="shenheQuery.zgscheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="抽查时间：" prop="zgsdate">
									<el-date-picker v-model="shenheQuery.zgsdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<img class="imgs" :src="addQuery.imgparentcompany" alt="" />
					</el-form>
				</div>

			</div>

			<div class="saveContent">
				<el-button v-if="dialogName!='详情'" type="primary" @click="save" size="medium">保 存</el-button>
			</div>

		</div>

		<!-- 扫描件上传组件 -->
		<managementFileUpload :visible.sync='uploadDialogVisible' :ImgUpload='fileList' @close='uploadClose'
			@confirm='uploadConfirm' />
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		addzhuanrang,
		zhuanrangData,
		updzhuanrang,
		getRent,
		getHouseDateByCid
	} from '@/api/management'
	import managementFileUpload from '@/components/managementFileUpload.vue';
	export default {
		name: "AccommodationManagementChanquanzhengjian",
		components: {
			managementFileUpload
		},
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				addQuery: {
					contractno: '',
					addr: '',
					renter: '',
					ownerunit: '',
					renteridno: '',
					owneridno: '',
					transferreason: '',
					evaluateno: '',
					evaluateprice: '',
					sellprice: '',
					transferfee: '',
					transferfee1: '',
					owe: '',
					owe1: '',
					destroy: '',
					destroy1: '',
					disagree: '',
					disagree1: '',
					memo: '',
					material: '否',
					disagree: '否',
					owe: '否',
					contract: '否',
					destroy: '否',
					city: '否',
					change: '否',
					contractno: '',
					imgupload: '',
					renterId: ''
				},
				searchList: [],
				rules: {},
				fuheQuery: {
					qgsview: '',
					qgscheck: '',
					qgsdate: ''
				},
				shenheQuery: {
					zgsdate: '',
					zgsview: '',
					zgscheck: ''
				},
				fangguanQuery: {
					fgzmanagerview: '',
					fgzmanager: '',
					fgzmanagerdate: ''
				},
				jinbanQuery: {
					fgzcheckview: '',
					fgzcheckdate: '',
					fgzcheck: ''
				},
				newAddQuery: {},
				list: [],
				listLoading: false,
				dialogVisible: false,
				addQueryle: false,
				shenheName: '经营管理意见',
				type: '',
				uploadDialogVisible: false,
				dialogName: '',
				shenheVisible: false,
				zid: '',
				isSearch: false,
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				fileList: []
			};
		},

		computed: {

		},

		mounted() {
			console.log(this.$route.query.dialogName)
			this.dialogName = this.$route.query.dialogName
			this.zid = this.$route.query.zid
			this.newAddQuery = JSON.stringify(this.addQuery)

			this.zhuanrangData()
		},

		methods: {
			createcID() {
				if (this.addQuery.contractno) {
					let data = {
						cid: this.addQuery.contractno
					}
					getRent(data).then(res => {
						this.addQuery.renter = res.data.renter
						this.addQuery.addr = res.data.address
						this.addQuery.renteridno = res.data.renteridno
					})

					let newDate = {
						CID: this.addQuery.contractno
					}
					getHouseDateByCid(newDate).then(res => {
						this.searchList = res.data
					})
				} else {
					this.$message({
						type: 'success',
						message: '请输入合同号!'
					})
				}
			},
			gotos() {
				this.$router.go(-1)
			},
			// 保存
			save() {
				// this.$refs.addForm.validate((valid) => {
				// 	if (valid) {
				// 		if (this.dialogName == '转让登记') {
				// 			this.addzhuanrang()
				// 		} else if (this.dialogName == '转让修改' || this.dialogName == '区公司审核转让' || this.dialogName == '区公司复核转让') {
				// 			this.updzhuanrang()
				// 		}
				// 	} else {
				// 		console.log('验证失败！');
				// 		return false;
				// 	}
				// });
				console.log(this.dialogName)
				if (this.dialogName == '转让登记') {
					this.addzhuanrang()
				} else if (this.dialogName == '转让修改' || this.dialogName == '区公司审核转让' || this.dialogName == '区公司复核转让' || this
					.dialogName == '房管站审核') {
					this.updzhuanrang()
				}

			},
			// 登记
			addzhuanrang() {
				let data = this.addQuery
				data.binghuList = this.searchList
				this.listLoading = true;
				addzhuanrang(data).then(res => {
					this.listLoading = false;
					this.shenheVisible = false
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			// 修改
			updzhuanrang() {
				let data
				if (this.dialogName == '转让修改') {
					data = this.addQuery
				} else if (this.dialogName == '区公司审核转让') {
					data = this.shenheQuery
					if (data.zgsview == '同意') {
						data.state = 40
					} else {
						data.state = -2
					}
					if (data.zgsdate) {
						data.zgsdate = dayjs(data.zgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				} else if (this.dialogName == '区公司复核转让') {
					data = this.fuheQuery
					if (data.qgsview == '同意') {
						data.state = 50
					} else {
						data.state = -1
					}
					if (data.qgsdate) {
						data.qgsdate = dayjs(data.qgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				} else if (this.dialogName == '房管站审核') {
					data = this.fangguanQuery
					data.state = 20
					if (data.fgzmanagerdate) {
						data.fgzmanagerdate = dayjs(data.fgzmanagerdate).format('YYYY-MM-DD HH:mm:ss')
					}
				}
				data.zid = this.zid
				this.listLoading = true;
				updzhuanrang(data).then(res => {
					console.log(res)
					this.listLoading = false;
					this.shenheVisible = false
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {});
			},
			// 详情
			zhuanrangData() {
				let data = {
					ZID: this.zid
				}
				zhuanrangData(data).then(res => {
					console.log(res)
					this.addQuery = res.data
					this.searchList = res.data.fenhuApplyList
					// this.addQuery.jizumianji = res.data.singlearea + res.data.mixarea
					this.fileList = JSON.parse(res.data.imgupload)
					console.log('313', this.fileList)


					this.createcID()

					this.jinbanQuery.fgzcheckview = res.data.fgzcheckview
					this.jinbanQuery.fgzcheckdate = res.data.fgzcheckdate
					this.jinbanQuery.fgzcheck = res.data.fgzcheck

					if (this.dialogName == '区公司复核转让') {
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
						this.fuheQuery.qgscheck = localStorage.getItem('username')
						this.fuheQuery.qgsdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
					} else if (this.dialogName == '区公司审核转让') {
						this.shenheQuery.zgsdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
						this.shenheQuery.zgscheck = localStorage.getItem('username')
						this.fuheQuery.qgsview = res.data.qgsview
						this.fuheQuery.qgscheck = res.data.qgscheck
						this.fuheQuery.qgsdate = res.data.qgsdate
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
					} else if (this.dialogName == '转让修改' || this.dialogName == '详情') {
						this.fuheQuery.qgsview = res.data.qgsview
						this.fuheQuery.qgscheck = res.data.qgscheck
						this.fuheQuery.qgsdate = res.data.qgsdate
						this.shenheQuery.zgsdate = res.data.zgsdate
						this.shenheQuery.zgsview = res.data.zgsview
						this.shenheQuery.zgscheck = res.data.zgscheck
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
					} else if (this.dialogName == '房管站审核') {
						this.fangguanQuery.fgzmanager = localStorage.getItem('username')
						this.fangguanQuery.fgzmanagerdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
					}
				})
			},
			// 重置
			rester() {
				this.addQuery = JSON.parse(this.newAddQuery)
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();

						this.rester()
					})
					.catch(_ => {});
			},
			// 扫描件上传
			handleUploadScan() {
				this.uploadDialogVisible = true;
			},
			uploadClose() {
				this.uploadDialogVisible = false
			},
			uploadConfirm(fileList) {
				let imgupload = []
				fileList.forEach((item, index) => {
					imgupload.push(item.response.data.url)
				})
				this.addQuery.imgupload = JSON.stringify(fileList)
				this.uploadDialogVisible = false
				this.fileList = fileList
			},
			gotodaying() {
				this.$router.push({
					path: 'guohuguanlilurudaying',
					query: {
						gid: this.gid
					}
				})
			},
		},
	};
</script>
<style scoped>
	.publicpageview {
		width: 1000px;
		margin: 0 auto;
	}

	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.xinxi {
		display: flex;
		width: 800px;
	}

	.contentAll {
		display: flex;
		align-items: center;
		background-color: #F7F7F7;
		flex-wrap: wrap;
	}

	.goufangContent {
		width: 50%;
		box-sizing: border-box;
		padding: 20px;
		border: 1px solid #008C93;
		height: 300px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.imgs {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		display: block;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}



	/dee/.el-date-editor {
		width: 120px !important;
	}

	/deep/.el-input__inner {
		width: 160px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}

	/deep/.xingxi .el-input__inner {
		width: 350px;
	}

	.section-title {
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
	}

	.buttons {
		display: flex;
	}
</style>